<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>n:{{ n }}</p>
    <p>dbn:{{ dbn }}</p>
    <button @click="add">n+1</button>

</div>

</body>
<script src="lib/vue/vue.js"></script>

<script type="text/javascript">


    const vm = new Vue({
        el: '#app',
        data: {
            n: 1
        },
        // 翻译为计算属性，定义的数据是依赖其他的值的变化而变化，叫做计算属性
        // 计算属性在定义的时候，是一个方法的定义，但是在调用的时候，是一个变量的形式调用
        computed: {
            dbn: function () {
                return this.n * 2;
            }

        },
        methods: {
            add(n) {
                this.n += 1;
            }
        },

    })

</script>

</html>
